import axios from 'axios'
import { Toast } from 'vant'
import Vue from 'vue'
import store from '@/store'

Vue.use(Toast)

// axois封装

const http = axios.create({
  baseURL: 'https://m.maizuo.com',
  timeout: 10000,
  headers: {
    // 这里可以添加基础请求头，每次使用axios的实例都会带有该请求头
  }
})

// 在请求前拦截 -- showLoading
// 添加请求拦截器
http.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // config就是请求的各类信息
  // console.log(config)
  Toast.loading({
    message: '加载中...',
    forbidClick: true,
    duration: 0
  })

  //   似乎不能用axios拦截器做nav-bar根据不同组件的需求做显示隐藏, 因为当很多时候我的返回按钮就是使用的router.back
  //   这是直接走缓存的, 不会再请求一次,因此不会拦截,这个时候就算从一个不需要navbar的地方回到一个需要的,那个需要的仍然不显示
  //   store.commit('showNav')
  //   if(location.href.includes('city') || location.href.includes('search') || location.href.includes('detail'))
  //     store.commit('hideNav')

  //   console.log(store.state.isNavShow)

  return {
    ...config

  }
}, function (error) {
  // 对请求错误做些什么
  Toast.fail({
    message: '加载失败',
    forbidClick: true,
    duration: 1000
  })
  return Promise.reject(error)
})

// 在请求后拦截 -- hideLoading
// 添加响应拦截器
http.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  // response是响应的各类信息
  // console.log(response)
  // Toast.success({
  //     message: '加载成功',
  //     forbidClick: true,
  //     duration: 1000,
  // })
  Toast.clear()
  return {
    ...response,
    fqm: 'fqmyysjjd'
    // 这个字段会加到axios.create的实例即http的then取数据的res中
  }
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error)
})

export default http
